<template>
  <div class="row margin-right-0 standard-bg">
    <div class="container">
      <div class="row">
        <!-- VIDEO POSTS -->
        <div class="col-lg-12 col-md-12">
          <!-- GALLERY VIDEO GRID SECTION -->
          <section id="gallery-video-section">
            <div class="row">
              <!-- RELATED VIDEOS -->
              <div class="col-lg-12 col-md-12 col-sm-12 user-info dropshd">
                <div class="col-lg-2 info-box-left">
                  <div class="info-box-top info-box-title">个人中心</div>
                  <ul>
                    <li v-for="info in infoList" :key="info.id" :class="{active: info.isActive}">
                      <a :href="info.href"><i :class="info.class"></i><span v-html="info.name">  </span></a>
                    </li>
                  </ul>
                  <div class="clearfix"></div>
                </div>
                <div class="col-lg-10 info-box-right">
                  <div class="col-lg-12 info-box-top">
                    <span class="info-box-title"> {{ title }} </span></div>
                    <div class="col-lg-12" v-if="path === 0">
                      <div class="spacer"></div>
                      <div class="panel panel-default">
                        <div class="panel-heading">修改密码</div>
                        <div class="panel-body">
                          <form class="form-horizontal" role="form">
                            <div class="form-group">
                              <label class="col-sm-2 control-label">手机号</label>
                              <div class="col-sm-6">
                                <input type="text" class="form-control" placeholder="请输入手机号" disabled v-model="showUsername">
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-2 control-label">新密码</label>
                              <div class="col-sm-6">
                                <input type="password" class="form-control" minlength="6" maxlength="16" placeholder="请输入新密码（6-16个字符，至少1个字母、1个数字）" v-model="password">
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-2 control-label">验证码</label>
                              <div class="col-sm-6" style="position: relative;">
                                <input type="text" class="form-control" minlength="6" maxlength="6" placeholder="请输入验证码" v-model="smsCode">
                                <button type="button" class="btn btn-default" style="position: absolute;right: 15px;" :disabled="sendDis" @click="sendSmsCode">{{ sendText }}</button>
                              </div>
                            </div>
                            <div class="form-group">
                              <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-default" @click="changePassword">修改密码</button>
                              </div>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                    <!--  ### 大会员 start ###    -->
                    <div class="col-lg-12 big" v-if="path === 1">
                      <div class="spacer"></div>
                      <div class="col-md-1 icon-box icon">
                        <img :src="user.avatar == null ? defaultImg : user.avatar" class="img-circle" alt="icon">
                      </div>
                      <div class="col-md-3 nickname">{{user.nickname}}
                        <span :style="isVip">{{tagArr[user.tag]}}</span>
                        <p v-if="user.isVip" style="font-size: 14px;margin-top: 10px;color: #99a2aa;">大会员有效期至{{user.vipExpiredTime | vipExpiredTimeFilter}}</p>
                      </div>
                      <div class="clearfix"></div>
                      <hr/>
                      <div class="pay-box">
                        <div class="col-md-3"></div>
                        <div class="col-md-3">
                          <img src="../../assets/img/pay.png" alt="">
                        </div>
                        <div class="col-md-3">
                          <div style="border-radius: 4px;border: 2px solid #00a0e9;text-align: center;height: 100px;line-height: 40px;">
                            <p style="font-size: 18px;">月度大会员</p><p style="font-size: 24px;color: var(--secondary-color)">￥25</p>
                          </div>
                          <div class="spacer"></div>
                          <input type="button" class="bg-primary" @click="pay" value="完成支付">
                        </div>
                        <div class="col-md-3"></div>
                      </div>
                    </div>
                    <!--  ### 我的信息 start ###    -->
                    <div class="col-lg-12 info" v-if="path === 2">
                      <div class="form-group">
                        <label class="col-sm-2 control-label">昵称：</label>
                        <input type="text" class="form-control input-text" placeholder="你的昵称" v-model="user.nickname" maxlength="16">
                        <span class="help-block">注：修改一次昵称需要消耗6个硬币</span>
                          <div class="clearfix"></div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">用户ID：</label>
                        <span>{{ user.id | idFormatFilter }}</span>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">我的签名：</label>
                        <div class="col-sm-10">
                          <textarea cols="30" rows="3" maxlength="100" class="col-sm-10"
                                    placeholder="设置您的签名(*^▽^*)" v-model="user.signature"></textarea>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">性别：</label>
                        <div class="col-sm-10">
                          <input type="button" value="男" class="form-control btn" :class="{'btn-primary' : user.sex === 1, 'btn-default': user.sex !== 1}" @click="setSex(1)">
                          <input type="button" value="女" class="form-control btn" :class="{'btn-primary' : user.sex === 2, 'btn-default': user.sex !== 2}" @click="setSex(2)">
                          <input type="button" value="保密" class="form-control btn" :class="{'btn-primary' : user.sex === 0, 'btn-default': user.sex !== 0}" @click="setSex(0)">
                        </div>
                        <div class="clearfix"></div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">出生日期：</label>
                        <input type="date" class="col-sm-10 input-date" :max="nowDate" v-model="user.birth">
                        <div class="clearfix"></div>
                      </div>
                      <hr/>
                      <div class="col-sm-12">
                        <input type="button" value="保存" @click="setInfo"
                               class="form-control btn btn-primary col-lg-offset-5 col-md-offset-4 col-xl-offset-4" />
                      </div>
                    </div>
                    <!--  ### 我的信息 end ###    -->
                    <div class="col-lg-12" v-if="path === 3">
                      <Icon :message="user.avatar"></Icon>
                    </div>
                    <div class="col-lg-12" v-if="path === 4">我是4</div>
                    <div class="col-lg-12" v-if="path === 5">我是5</div>
                    <div class="col-lg-12" v-if="path === 6">我是6</div>
                    <div class="spacer"></div>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {title, pathArr, getInfo, setInfo, pay, changePassword} from './account-js'
import {dateFormat} from '../../js/my-utils'
import Icon from '../../components/icon/Icon'
import {showMessage} from '../../js/my-plugin'
export default {
  name: 'Account',
  components: {Icon},
  inject: ['reload'],
  data () {
    return {
      infoList: [
        {id: 0, isActive: true, href: '/#/account/home', class: 'fa fa-home', name: '首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页'},
        {id: 1, isActive: false, href: '/#/account/big', class: 'fa fa-universal-access', name: '大&nbsp;&nbsp;会&nbsp;&nbsp;员'},
        {id: 2, isActive: false, href: '/#/account/info', class: 'fa fa-user', name: '我的信息'},
        {id: 3, isActive: false, href: '/#/account/avatar', class: 'fa fa-user-circle-o', name: '我的头像'},
        {id: 4, isActive: false, href: '/#/account/coins', class: 'fa fa-empire', name: '我的硬币'},
        {id: 5, isActive: false, href: '/#/account/diamonds', class: 'fa fa-diamond', name: '我的钻石'},
        {id: 6, isActive: false, href: '/#/account/record', class: 'fa fa-history', name: '我的记录'}
      ],
      // 修改密码参数
      sendDis: false,
      sendText: '获取验证码',
      password: '',
      smsCode: '',
      // 路由路径与标题
      path: 0,
      title: title[0],
      user: {id: '', username: '', nickname: '', avatar: null, signature: '', sex: 0, birth: '2020-11-11', isVip: false, vipExpiredTime: new Date()},
      tagArr: ['正式会员', '大会员', '年度大会员'],
      defaultImg: require('../../assets/img/user/akari.jpg')
    }
  },
  computed: {
    nowDate: () => {
      return dateFormat('yyyy-mm-dd', new Date())
    },
    userState: function () {
      return this.$store.state.user
    },
    isVip: function () {
      return this.user.isVip ? 'background: rgb(251, 114, 153);' : 'background: var(--primary-color);'
    },
    showUsername: function () {
      if (this.user.username == null || this.user.username === '') {
        return ''
      }
      let length = this.user.username.length
      return this.user.username.substring(0, 3) + '****' + this.user.username.substring(length - 4, length)
    }
  },
  mounted: function () {
    // this.infoList = infoList
    // 获取当前路由
    const nowPath = this.$route.path.split('/')
    const path = pathArr[nowPath[2]]
    this.infoList[this.path].isActive = false
    this.path = path
    this.title = title[this.path]
    this.infoList[this.path].isActive = true
    // 填充用户信息
    getInfo(this, this.userState)
  },
  methods: {
    setSex: function (sex) {
      this.user.sex = sex
    },
    setInfo: function () {
      setInfo(this, this.user)
    },
    pay () {
      pay(this)
    },
    sendSmsCode (evt) {
      // 发送验证码
      const data = {
        mobile: this.user.username,
        type: 'forget'
      }
      this.$axios({
        method: 'post',
        url: '/api/user/sms',
        data: this.$qs.stringify(data)
      })
        .then((res) => {
          console.log(res.data)
          showMessage(res.data.msg, 1)
        })
        .catch((error) => {
          console.log(error)
          showMessage(error, 1)
        })
      let s = 60
      this.sendDis = true
      const timer = setInterval(() => {
        s--
        this.sendText = '重新发送（ ' + s + ' s ）'
        if (s === 0) clearInterval(timer)
      }, 1000)
      this.sendText = '重新发送'
      setTimeout(() => {
        this.sendDis = false
      }, s * 1000)
    },
    changePassword () {
      changePassword(this)
    }
  },
  watch: {
    '$route': {
      handler: function (newPath, oldPath) {
        const path1 = pathArr[newPath.name]
        const path2 = pathArr[oldPath.name]
        this.infoList[path2].isActive = false
        this.infoList[path1].isActive = true
        this.path = path1
        this.title = title[this.path]
      }
    },
    'userState': {
      handler: function (user) {
        // 填充用户信息
        getInfo(this, user)
      }
    }
  }
}

</script>

<style scoped>
.info-box-left ul li.active {
  background: var(--secondary-color);
}
.img-circle {
  width: 150%;
}
.nickname {
  position: relative;
  color: rgb(251, 114, 153);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 10px 10px;
}
.nickname span {
  font-size: 12px;
  color: #fff;
  padding: 2px 6px;
  margin-left: 15px;
  border-radius: 4px;
}
.big .pay-box {
  height: 210px;
}
.big .pay-box img {
  width: 100%;
}
</style>
